<template>
    <el-col class="border padd20">
         <CurrentDate title="实践打卡次数排名" />
        <el-col v-if="daka.length !=0">
            <el-col v-if="daka.length>=5">
                <el-col :span="12" class="padd10">
                    <el-col class="box box-pack-between box-align-center mt10" v-for="(item,index) in group(daka,5)[0]" :key="index">
                        <div class="box box-align-center">
                          <span class="w25">{{index+1}}</span>
                          <el-image :src="item.logo !=null?item.logo:'/static/image/logo.jpg'" style="width: 28px;height: 28px;border-radius: 50%;" class="ml5 mr5"></el-image>
                          <span class="test-es ml10 tl w150">{{item.name}}</span>
                        </div>
                        <div>
                            打卡{{item.cnt}}次
                        </div>
                    </el-col>
                </el-col>
                <el-col :span="12" class="padd10">
                    <el-col class="box box-pack-between box-align-center mt10"  v-for="(item,index) in group(daka,5)[1]" :key="index">
                        <div class="box box-align-center">
                          <span class="w25">{{index+6}}</span>
                          <el-image :src="item.logo !=null?item.logo:'/static/image/logo.jpg'" style="width: 28px;height: 28px;border-radius: 50%;" class="ml5 mr5"></el-image>
                            <span class="test-es ml10 tl w150">{{item.name}}</span>
                          </div>
                        <div>
                            打卡{{item.cnt}}次
                        </div>
                    </el-col>
                </el-col>
            </el-col>
            <el-col v-if="daka.length<5">
                <el-col :span="12" class="padd10">
                    <el-col class="box box-pack-between box-align-center mt10" v-for="(item,index) in daka" :key="index">
                        <div class="box box-align-center">
                          <span class="w25">{{index+1}}</span>
                          <el-image :src="item.logo !=null?item.logo:'/static/image/logo.jpg'" style="width: 28px;height: 28px;border-radius: 50%;" class="ml5 mr5"></el-image>
                          <span class="test-es ml10 tl w150">{{item.name}}</span>
                        </div>
                        <div>
                            打卡{{item.cnt}}次
                        </div>
                    </el-col>
                </el-col>
            </el-col>
        </el-col>
        <el-col  class="box box-align-center box-pack-center height100" v-else>
            暂无数据
        </el-col>
    </el-col>
</template>

<script>
    import CurrentDate from "./CurrentDate.vue";
    export default {
        components:{
            CurrentDate
        },
        props: {
            daka: {
                type: Array,
                default: []
            }
        },
        methods:{
            group(array, subGroupLength) {
                console.log(array, subGroupLength);
                  let index = 0;
                  let newArray = [];
                  while(index < array.length) {
                      newArray.push(array.slice(index, index += subGroupLength));
                  }
                  return newArray;
              }
        }
    }
</script>
<style scoped>
    @import './com.scss';
</style>
<style scoped>
    .border{
        height: 260px;
    }
</style>
